<script src="<?php echo $html->url('/cms/js/jquery.ui.all.js');?>"></script>
<h2><?php echo __("Installed Blocks")?></h2>
<?php echo __("Improvements: Show tooltip for more info!!")?>
<div id="blocks">
<?php  foreach ($installedBlocks as $block) {  ?>
  <div>
    <a href="#"><?php echo $block;?></a>
    <div>
    <ul id="block-<?php echo $block;?>" class="modules">
    <?php  
    if(!empty($modules[$block])) {
		foreach ($modules[$block] as $module) { ?>
	    <li id="module-<?php echo $module['Module']['id'];?>"><?php echo $module['Module']['heading'];?></li>
    <?php  } } ?>
    </ul>
    </div>
  </div>


<?php  } ?>
</div>
<script>
$("#blocks").accordion();

$(".modules").sortable({
   stop: function(event, ui) {
   	var newOrder = '';
   	//console.log(this.id);
	$("#"+this.id+" > li").each(function(){
		//console.log(this.id);
		newOrder = newOrder +'|'+ this.id;
	});
	//console.log(newOrder);
    $.get(URL+'modules/reOrder/'+this.id+'/'+newOrder);
   }
});

</script>